<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<link rel="stylesheet" media="screen" href="css/docs.css"/>
<link rel="stylesheet" media="screen" href="lib/jqplot/jquery.jqplot.min.css"/>
<!-- jQplot SETUP -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        var profits = [87.65,98.40, 65.39,93.20,78.00,67.98,78.45,89.56,87.10,69.56,96.20,100];
        var tickslabel = ['一月', '二月', '三月', '四月','五月','六月','七月', '八月', '九月', '十月','十一月','十二月'];
        var ylabel = ['Profits'];


        //line with some options
        var chart2 = $.jqplot('chart2', [profits], {
            title:'考核历史数据',
            legend:{
                show:true,
                labels:['定性考核'],
                location:'ne'
            },
            axes:{
                xaxis:{
                    renderer:$.jqplot.CategoryAxisRenderer ,
                    ticks:tickslabel
                },
                yaxis:{
                    tickOptions:{
                        formatString:'%.2f 分'
                    }
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 7.5,
                tooltipAxes:'y'
            },
            cursor: {
                show: false
            }
        });

    });
</script>
<!-- jQplot SETUP END -->

<h1 class="page-title">定量考核-考核历史浏览-查看全年分数</h1>

<div class="container_12 clearfix">
    <section class="portlet grid_12 leading docs">
        <header>
            <h2>定量考核打分</h2>
        </header>
        <section>

            <DIV class="portlet">
                <header>
                    <h5_n>${work.baseId.name}</h5_n>
                    <h2><s:if test='%{#request.work.baseId.sex=="0"}'>先生</s:if><s:else>女士</s:else></h2>
                </header>
                <section class="clearfix">


                    <div class="grid_2 alpha" style=" text-align:center">
                        <img src="${work.baseId.facePath}" width="120" height="135"/>

                    </div>
                    <div class="grid_3">
                        <dl>
                            <dt>职务</dt>
                            <dd><h6>${work.duty.dutyName} </h6></dd>
                            <dt>员工号</dt>
                            <dd><h6>${work.workNo}</h6></dd>
                            <dt>职等</dt>
                            <dd><h6>${work.grade.gradeName}</h6></dd>
                        </dl>
                    </div>

                    <div class="grid_3 omega">
                        <dl>
                            <dt>部门</dt>
                            <dd><h6>${work.organization.fullName}</h6></dd>
                            <dt>工龄</dt>
                            <dd><h6>${work.workAge}</h6></dd>
                            <dt>考核记录</dt>
                            <dd><h6>92分</h6>
                                <select id="form-timezone" style="opacity: 0;">
                                    <option value="1">显示本年度</option>
                                    <option value="2">显示上年度</option>
                                    <option value="3">显示全部</option>
                                </select>
                            </dd>

                        </dl>
                    </div>


                </section>
            </DIV>

            <div class="leading">
                <div class="jqPlot" id="chart2" style="width:100%;height:200px;"></div>
            </div>
            <div class="clear"></div>
            <div class="leading">
                <h2>2012年5月考核项目明细分值</h2>
                <table class="display" id="example">
                    <thead>
                    <tr>
                        <th><strong>考核项目</strong></th>
                        <th>占比</th>
                        <th>打分说明</th>
                        <th>考核周期</th>
                        <th>量化数字</th>
                        <th>得分</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="gradeX">
                        <td>业绩达成率(万元)</td>
                        <td>
                            <div id="progress1" class="progress"><span style="width: 50%;"><b>50%</b></span></div>
                        </td>
                        <td>2万以上100分，1-2万80分，1万以下60分</td>
                        <td>月度</td>
                        <td>2</td>
                        <td style="text-align:center">
                            85
                        </td>
                    </tr>
                    <tr class="gradeC">
                        <td>客户投诉(次数)</td>
                        <td>
                            <div id="progress2" class="progress"><span style="width: 10%;"><b>10%</b></span></div>
                        </td>
                        <td>2万以上100分，1-2万80分，1万以下60分</td>
                        <td>月度</td>
                        <td>3</td>
                        <td class="gradeX" style="text-align:center">85</td>
                    </tr>
                    <tr class="gradeA">
                        <td>新开发客户(个)</td>
                        <td>
                            <div id="progress3" class="progress"><span style="width: 20%;"><b>20%</b></span></div>
                        </td>
                        <td>2万以上100分，1-2万80分，1万以下60分</td>
                        <td>月度</td>
                        <td>4</td>
                        <td class="gradeX" style="text-align:center">70</td>
                    </tr>
                    <tr class="gradeA">
                        <td>老客户下单率(万元)</td>
                        <td>
                            <div id="progress4" class="progress"><span style="width: 20%;"><b>20%</b></span></div>
                        </td>
                        <td>2万以上100分，1-2万80分，1万以下60分</td>
                        <td>月度</td>
                        <td>3</td>
                        <td class="gradeX" style="text-align:center">98</td>
                    </tr>
                    <tr class="gradeA">
                        <td>&nbsp;</td>
                        <td style="text-align:right"><p style="font-weight:bold; font-size:16px">&nbsp;</p></td>
                        <td style="text-align:right">&nbsp;</td>
                        <td style="text-align:right">&nbsp;</td>
                        <td style="text-align:right"><span style="font-weight:bold; font-size:16px">总分：</span></td>
                        <td class="gradeX" style="text-align:center"><p style="font-weight:bold; font-size:16px">
                            84.6</p></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <h4>&nbsp;</h4>
        </section>
    </section>
</div>